import type { PropType, ExtractPropTypes } from 'vue'

// 分页器配置
export declare interface PaginationConfig {
	pageSizes?: number[] // 每页显示多少条数据下拉选项
	total?: number | undefined // 总数量
	layout?: string // 组件布局，子组件名用逗号分隔
	pageSize: number // 每页显示条目个数
	currentPage: number // 当前页数
}

//column item说明
declare interface ColumnItem {
	prop: string // 属性的key
	label: string // 列表头展示的文本
	width?: string | number // 列宽度
	fixed?: string // 列是否固定在左侧或者右侧  ['left' | 'right']
	headerSlotName?: string // 自定义表头的Slot名称
	contentType?: string // 内容展示类型 目前支持['', 'slot']
	[key: string]: any
}

// 操作栏item说明
declare interface OperateItem {
	slot: string // 展示slot
	// 以下配置只对slot属性为undefined时生效
	text: string // 按钮文本
	color?: string // 按钮颜色
	onClick: (item: { [key: string]: any }) => void // 按钮点击事件
	showBtn?: (item: { [key: string]: any }) => boolean | undefined //  动态控制按钮的展示
}

// 多选
declare interface SelectableConfig {
	disabled: (row: { [key: string]: any }) => boolean
}

// 属性Prop配置-----------------------------------------------------------------------------------
export const customTableProps = {
	// 表格数据
	tableData: {
		type: Array as PropType<Record<string, unknown>[]>,
		default: [],
	},
	// 列数据
	columnData: {
		type: Array as PropType<ColumnItem[]>,
		required: true,
	},
	// 操作栏
	operate: {
		type: Array as PropType<OperateItem[]>,
		default: [],
	},
	// 操作栏宽度
	operateWidth: {
		type: Number,
		default: 200,
	},
	// 多选
	selectableConfig: {
		type: Object as PropType<SelectableConfig>,
		default: null,
	},
	// 序号
	showIndex: {
		type: Boolean,
		default: false,
	},
	// 分页器
	paginationConfig: {
		type: Object as PropType<PaginationConfig>,
		default: {
			pageSizes: [],
			total: undefined,
			layout: '',
		},
	},
}
export type CustomTableProps = ExtractPropTypes<typeof customTableProps>

// 事件
export const customTableEmits = {
	onPagination: ({ type, value }: { type: string; value: number }) => ({ type, value }),
	onSelectionChange: (arr: any[]) => arr,
}
export type CustomTableEmits = typeof customTableEmits
